//header common
import React from 'react'
import { Tooltip,Icon } from 'antd';
import { withRouter } from 'next/router'
import Login from './loginPops'
import SingUp from './singUp'
import Link from 'next/link'
import '../../static/style/head.less'
import Form from './decorator'

@Form
class Head extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            home:false,
            Ontext:false,
            icons:false,
            text:'',
            showLogin:false,
            singUp:false
            
        }
        this.toggleDom = this.toggleDom.bind(this)
    }

    componentDidMount(){
        
    }
    toggleDom (e){
        
        const title = e.target.getAttribute('title')
        this.setState({[title]: !this.state[title]})
      }

    handleInputChange = (e) =>{
            const target = e.target;
            const value = target.type === 'checkbox' ? target.checked : target.value;
            const name = target.name;
            this.setState({
                [name]: value
            });
      }
      showLogin = () =>{
            this.setState({
                showLogin:!this.state.showLogin
            })
      }

      singUps = () =>{
        this.setState({
            singUp:!this.state.singUp
        })
      }
      

    render(){
        const {home,text,Ontext,icons,showLogin,singUp} = this.state;
        // console.log(home)
        return(
            <nav className="naverBar">
                <div className="headerLogo" >
                    <div className="logoContent" >
                        < Link prefetch href = "/" >
                             < span className = "iconfont icon-yuncloud259 logos" > </span>
                        </Link>
                        <span className="logoText" title="home" onMouseEnter={this.toggleDom} onMouseLeave={this.toggleDom}>{home ? 'Think About Yourself':'T.A.Y'}</span>
                    </div>
                </div>
                <div className="headerSearch">
                    <div className="inputAll" style={{width:Ontext?'80%':'50%'}}>
                        <input title="Ontext" type="text"  name="text"  value={text} onChange={this.handleInputChange}  placeholder="搜索" onFocus={this.toggleDom} onBlur={this.toggleDom} className="search-input" />
                        <svg className="icon seacherIcon" aria-hidden="true">
                                <use xlinkHref={Ontext? '#icon-filedicon_search_gr' :'#icon-sousuo1'}></use>
                        </svg>
                    </div>
                </div>
                <div className="userInfor fix_r_b">
                    <section title="icons" className="control flex-Center" onMouseEnter={this.toggleDom} onMouseLeave={this.toggleDom}>
                        <Icon   rotate={icons ? 180 : 0} type="setting" style={{fontSize:'25px',cursor:'pointer'}} />
                    </section>
                    <section className="infors flex-Center">
                        <button className="normalBtn" onClick={this.showLogin}>登 录</button>
                        <button className="normalBtn" onClick={this.singUps}>注 册</button>
                    </section>
                    <section className="infors flex-Center">
                        <Link prefetch href="/essay">
                            <button className="normalBtn">写文章</button>
                        </Link>
                    </section>
                </div>
                {/* 登录弹窗 */}
                {
                    showLogin && <Login ishow={this.showLogin}/>
                }
                {
                    singUp && <SingUp ishow={this.singUps}/>
                }
                
            </nav>
        )
    }
}

export default Head;